<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/css/cart.css">
    <link rel="stylesheet" href="../../fonts/iconfont.css">
</head>

<body>
    <div class="topWarp" style="height:60px;background-color:#fff;">
        <div class="top">
            <h1>
                <img src="../images/logo_03.jpg" alt="">
            </h1>
            <ul class="top_ul">
                <li><a class="before">7T系列<span class="iconfont icon-new1"></span>
                        <div class="show">
                            <div class="show-in">
                                <p>
                                    <span class="iconfont icon-dianhua1"></span><br>
                                    <i>OnePuls7T</i>
                                </p>
                                <p>
                                    <span class="iconfont icon-dianhua1"></span><br>
                                    <i>OnePuls7T</i>
                                </p>
                                <p>
                                    <span class="iconfont icon-dianhua1"></span><br>
                                    <i>OnePuls7T</i>
                                </p>
                            </div>
                        </div>
                    </a></li>
                <li><a>7系列</a></li>
                <li><a>商城</a></li>
                <li><a>品牌</a></li>
                <li><a>服务</a></li>
                <li><a>论坛</a></li>
                <li><a>零售店</a></li>
            </ul>
            <div class="top_r">
                <a class='topr-login iconfont icon-yonghu2'>

                </a>
                <div class="topr-show">
                    <p>订单</p>
                    <p>账户</p>
                    <p>推荐有礼</p>
                    <p id="user"><a href="login.html">登录</a></p>
                </div>


                <a href="myCart.html" class="iconfont icon-Newuserzone"></a>
                <a class="iconfont icon-sousuo3"></a>
            </div>
        </div>
    </div>
    <!-- wo我的购物车页面 -->
    <div class="warp">
        <div class="cart-top"><span>购物车</span></div>
        <div>
            <ul class="plist">
                <li>
                    <div class="con-l">图</div>
                    <div class="con-r">
                        <div class="con-r-1">
                            <p>yi加云耳2黑色</p>
                        </div>
                        <div class="con-r-2">
                            <p>￥599.00</p>
                        </div>
                        <div class="con-r-3">
                            <span>-</span>
                            <input type="text">
                            <span>+</span>
                        </div>
                        <div class="con-r-4">
                            <p>￥599.00</p>
                        </div>
                        <div class="con-r-5">
                            <i class="iconfont icon-shanchudelete30"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="cart-bottom">
            <div class="cart-bottom-l">
                <p>已选择 &nbsp;<span id="cart-pnum"></span>&nbsp; 件商品</p>
            </div>
            <div class="cart-bottom-r">
                <div class="cart-bottom-r-1">
                    <i>总价</i>
                    <span id="zongJia">￥00.00</span>
                </div>
                <div class="cart-bottom-r-2">
                    <p>支持免邮</p>
                </div>
                <div class="cart-bottom-r-3">
                    <button id="btn-go-plist">继续购物</button>
                    <button id="btn-go-price">去结算</button>
                </div>
                <div class="cart-bottom-r-4">
                    <p>请在下一步使用优惠券</p>
                </div>
            </div>
        </div>
    </div>


    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        $('.topr-login').hover(function () {
            $('.top_r .topr-show').css({
                display: 'block'
            })
        }, function () {
            $('.top_r .topr-show').css({
                display: 'none'
            })
        })
        $('.top_r .topr-show').hover(function () {
            $('.top_r .topr-show').css({
                display: 'block'
            })
        }, function () {
            $('.top_r .topr-show').css({
                display: 'none'
            })
        })

        //----------------
        let user = localStorage.getItem("username")
        let uid = localStorage.getItem("uid")
        if (user) {
            $('#user').html("用户：" + user + '&nbsp;&nbsp;<a id="userOut" href="javscript:;">退出</a>')
            $('#userOut').click(function () {
                localStorage.clear()
            })
        }
        //---------加载用户购物车中的商品
        $.ajax({
            url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
            type: "get",
            data: {
                id: uid
            }
        }).then(res => {
            let arr = res.data;
            if (arr.length >= 1) {
                let html = '';
                for (let i = 0; i < arr.length; i++) {
                    html += `
                    <li>
                    <div class="con-l"><img src="../images/${arr[i].pimg}"></div>
                    <div class="con-r">
                        <div class="con-r-1">
                            <p>${arr[i].pname}</p>
                        </div>
                        <div class="con-r-2">
                            <p>￥${arr[i].pprice}</p>
                        </div>
                        <div class="con-r-3">
                            <span class="sub-btn" data-pid="${arr[i].pid}">-</span>
                            <input type="text" value="${arr[i].pnum}" disabled="disabled">
                            <span class="add-btn" data-pid="${arr[i].pid}">+</span>
                        </div>
                        <div class="con-r-4">
                            <p class="pid-price">￥${(arr[i].pnum * arr[i].pprice).toFixed(2)}</p>
                        </div>
                        <div class="con-r-5">
                            <i data-pid="${arr[i].pid}" class="del-btn iconfont icon-shanchudelete30"></i>
                        </div>
                    </div>
                </li>
                    `
                }
                $(".plist").html(html)

                let num2 = 0
                for(let i=0;i<arr.length;i++){
                    num2 += parseFloat(arr[i].pnum)
                }
                 $('#cart-pnum').html(num2)
                
                 let priceArr = $('.pid-price').text().slice(1).split("￥")
            let num = 0
            for (let i = 0; i < priceArr.length; i++) {
                num += parseFloat(priceArr[i])
            }
            console.log(num);
            $('#zongJia').html('￥' + num.toFixed(2))
                
           
                /* -----------加按钮------减按钮 ----- 删除按钮--------- */
                //删除
                $('.del-btn').on('click', function () {
                    let pid = $(this).attr('data-pid')
                    
                    $.ajax({
                        url: 'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
                        type: "get",
                        data: {
                            uid, pid
                        }
                    }).then(res => {
                        //////////////待测试 ----------------
                        let a = $(this).parent().parent().children('.con-r-3').children('input').val()
                        console.log($('#cart-pnum').text());
                        console.log(a);
                        let c = $('#cart-pnum').text()
                        $('#cart-pnum').text(c-a)
                        //////////////////////------------

                        $(this).parent().parent().parent().remove()
                        alert(res.msg)
                        // location.reload()
                       
                    })
                    
                    
                })
                //加按钮
                $('.add-btn').click(function () {
                    let pid = $(this).attr('data-pid')
                    let pObj = arr.find(v => v.pid == pid)
                    pObj.pnum++;
                    $(this).prev().val(pObj.pnum)
                    $.ajax({
                        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                        type: "get",
                        data: {
                            uid, pid, pnum: pObj.pnum
                        }
                    }).then(res => {
                        
                        countPrice(pObj, this,arr)
                    })
                })
                //减按钮
                $('.sub-btn').click(function () {
                    let pid = $(this).attr('data-pid')
                    let pObj = arr.find(v => v.pid == pid)
                    if (pObj.pnum == 1) {
                        return
                    }
                    pObj.pnum--;
                    $(this).next().val(pObj.pnum)
                    $.ajax({
                        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                        type: "get",
                        data: {
                            uid, pid, pnum: pObj.pnum
                        }
                    }).then(res => {
                        
                        countPrice(pObj, this,arr)
                    })
                })


            } else {
                $(".plist").html('空空如也不明觉厉')
            }
        })

        /* 加减按钮算单个商品的总价函数封装 */
        function countPrice(pObj, element,plist) {
            $(element).parent().next().children().html('￥' + (pObj.pnum * pObj.pprice).toFixed(2))

            let arr = $('.pid-price').text().slice(1).split("￥")
            let num = 0
            for (let i = 0; i < arr.length; i++) {
                num += parseFloat(arr[i])
            }
            console.log(num);
            $('#zongJia').html('￥' + num.toFixed(2))

            //总共购买了多少件商品//
            
            let num2 = 0
            for(let i=0;i<plist.length;i++){
                num2 += parseFloat(plist[i].pnum)
            }
            $('#cart-pnum').html(num2)

        }
        /* ----------   总价 ---------------  */

        //继续购物按钮
        $("#btn-go-plist").on('click', function () {
            location.href = '../../index.html'
        })
    </script>
</body>

</html>